import React, { Component } from 'react';

class Category extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '小赵'
        }
    }
    changeMsg = () => {
        // 不能直接修改
        // this.state.msg = '小朱';
        // 需要使用setState
        this.setState({
            msg: '小巧'
        })
    }
    changeMsgParam = (data) => {
        console.log(data);
        this.setState({
            msg: data
        })
    }
    changeMsgParam2 = (data, e) => {
        console.log(data);
        console.log(e);
        this.setState({
            msg: data
        })
    }
    render() {
        return (
            <div>
                <p>{this.state.msg}</p>
                <p>
                    <button onClick={this.changeMsg}>修改msg数据</button>
                </p>
                <p>
                    {/* 不可以绑定函数时直接添加() */}
                    {/* <button onClick={this.changeMsg()}>修改msg数据()</button> */}
                </p>
                <p>
                    {/* 绑定事件时,采用回调函数进行传递参数 */}
                    <button onClick={() => { this.changeMsgParam('小范未来大咖') }}>修改数据-传递参数</button>
                </p>
                <p>
                    <button onClick={(e) => { this.changeMsgParam2('小范未来大咖222', e) }}>修改数据-传递参数-传递事件对象</button>
                </p>
            </div>
        );
    }
}

export default Category;